'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import Navbar from '@/components/Navbar';
import CategoryManager from '@/components/admin/CategoryManager';
import WordManager from '@/components/admin/WordManager';
import UserManager from '@/components/admin/UserManager';
import RecordList from '@/components/admin/RecordList';
import PartOfSpeechManager from '@/components/admin/PartOfSpeechManager';
import { Button } from '@/components/ui/button';

export default function AdminPage() {
  const router = useRouter();
  const [activeTab, setActiveTab] = useState<'categories' | 'words' | 'pos' | 'users' | 'records'>('categories');
  const [isAdmin, setIsAdmin] = useState(false);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    checkAuth();
  }, []);

  const checkAuth = async () => {
    try {
      const res = await fetch('/api/auth/me');
      const data = await res.json();
      if (!data.success || !data.user.isAdmin) {
        router.push('/dashboard');
      } else {
        setIsAdmin(true);
      }
    } catch (error) {
      router.push('/dashboard');
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return (
      <div>
        <Navbar />
        <div className="container">
          <div>加载中...</div>
        </div>
      </div>
    );
  }

  if (!isAdmin) {
    return null;
  }

  return (
    <div className="min-h-screen bg-background">
      <Navbar />
      <div className="container py-6">
        <h1 className="text-3xl font-bold mb-6">管理端</h1>
        
        <div className="flex gap-0 mb-6 border-b border-border overflow-x-auto">
          <Button
            variant={activeTab === 'categories' ? 'default' : 'ghost'}
            onClick={() => setActiveTab('categories')}
            className={`rounded-t-lg rounded-b-none border-b-2 transition-colors ${
              activeTab === 'categories'
                ? 'border-primary'
                : 'border-transparent hover:border-border'
            }`}
          >
            分类管理
          </Button>
          <Button
            variant={activeTab === 'words' ? 'default' : 'ghost'}
            onClick={() => setActiveTab('words')}
            className={`rounded-t-lg rounded-b-none border-b-2 transition-colors ${
              activeTab === 'words'
                ? 'border-primary'
                : 'border-transparent hover:border-border'
            }`}
          >
            单词管理
          </Button>
          <Button
            variant={activeTab === 'pos' ? 'default' : 'ghost'}
            onClick={() => setActiveTab('pos')}
            className={`rounded-t-lg rounded-b-none border-b-2 transition-colors ${
              activeTab === 'pos'
                ? 'border-primary'
                : 'border-transparent hover:border-border'
            }`}
          >
            词性管理
          </Button>
          <Button
            variant={activeTab === 'users' ? 'default' : 'ghost'}
            onClick={() => setActiveTab('users')}
            className={`rounded-t-lg rounded-b-none border-b-2 transition-colors ${
              activeTab === 'users'
                ? 'border-primary'
                : 'border-transparent hover:border-border'
            }`}
          >
            用户管理
          </Button>
          <Button
            variant={activeTab === 'records' ? 'default' : 'ghost'}
            onClick={() => setActiveTab('records')}
            className={`rounded-t-lg rounded-b-none border-b-2 transition-colors ${
              activeTab === 'records'
                ? 'border-primary'
                : 'border-transparent hover:border-border'
            }`}
          >
            挑战记录
          </Button>
        </div>

        {activeTab === 'categories' && <CategoryManager />}
        {activeTab === 'words' && <WordManager />}
        {activeTab === 'users' && <UserManager />}
        {activeTab === 'pos' && <PartOfSpeechManager />}
        {activeTab === 'records' && <RecordList />}
      </div>
    </div>
  );
}

